<template>
  <bazi-section title="流日">
    <view class="containter">
      <view class="dayun-box">
       <template v-for="(item,index) in liuriData">
          <view class="dayun-item" :key="index" @click="liuriClick(item, index)">
            <view class="dayun-year">{{liuriDate(item.day)}}</view>
            <view class="dayun-year">{{item.dayInChinese || '-'}}</view>
            <view class="dayun-info" :class="[liuriIndex == index ? 'dayun-select' : '',]">
              <view class="dayun-ele">
                <view class="dayun-ganzhi" :style="fiveElementInfo(item.ganZhi[0])">{{item.ganZhi[0]}}</view>
                <view class="dayun-shishen">{{shishenEllipsis(item.shiShen[0])}}</view>
              </view>
              <view class="dayun-ele">
                <view class="dayun-ganzhi" :style="fiveElementInfo(item.ganZhi[1])">{{item.ganZhi[1]}}</view>
                <view class="dayun-shishen">{{shishenEllipsis(item.shiShen[1])}}</view>
              </view>
            </view>
          </view>
        </template>
      </view>
    </view>
  </bazi-section>
</template>
<script>
  import { getBaziLiuRiApi } from "@/http/api/bazi/api";
  import baziSection from './section.vue'
  import wuxingColor from '@/utils/wuxing.js'
  import  { EventBus } from '@/main.js'
  import { shishenEllipsis } from '@/utils/index.js'
  export default {
    components: {
      baziSection
    },
    props: {
      result: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        baziResult: this.result,
        liuyueData: [],
        liunian: '',
        liuriIndex: undefined,
        liuriData: [],
        shishenEllipsis: shishenEllipsis
      }
    },
    mounted() {
      EventBus.$on('liuyue', param => {
        this.liuriIndex = 0;
        this.liuyueData = param.liuyueData;
        this.liunian = param.year;
        this.getLiuriData(param.year, true);
      })
    },
    beforeDestroy(){
      EventBus.$off("liuyue")
    },
    methods: {
      getLiuriData(year, isFirst) {
        getBaziLiuRiApi({
          userName: this.baziResult.userName,
          birthDay: this.baziResult.birthDay,
          districtGeocode: this.baziResult.districtGeocode,
          sex: this.baziResult.sex,
          solar: (this.baziResult.trueSolarTime && this.baziResult.trueSolarTime != "") ? true : false,
          yearMonth: year + '-' + (this.liuyueData.index+1)
        }).then(res => {
          if (res.code == 200) {
            // 补全行个数
            let liuriTem = res.data;
            let length = liuriTem.length;
            let remainder = (length % 5)==0 ? 0 : 5-(length % 5);
            for (let i = 0; i < remainder; i++) {
              liuriTem.push({
                day: '',
                ganZhi: ['', ''],
                shiShen: ['', '']
              })
            }
            this.liuriData = liuriTem;
            if (isFirst) {
              EventBus.$emit('liuri', {
                liuriData: this.liuriData[0]
              })
            }
          }
        })
      },
      // 对应五行信息
      fiveElementInfo(str) {
        let { color } = wuxingColor.getGanzhiWuxingColorInfo(str);
        return `color: ${color}`
      },
      liuriClick(data, index) {
        if (this.liuriIndex == index) return
        this.liuriIndex = index;
        EventBus.$emit('liuri', {
          liuriData: data
        })
      },
      liuriDate(date) {
        if (date) {
          let arr = date.split('-');
          return `${arr[1]}-${arr[2]}`          
        }
        return '-'
      }
    }
  };
</script>

<style lang="scss" scoped>
  .calendar_containter {
    width: 100%;
    box-sizing: border-box;
  }
  .containter {
    
  }

  .dayun-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 28rpx;

    .dayun-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      width: 20%;
      box-sizing: border-box;

      .dayun-year {
        width: 100%;
        font-size: 20rpx;
        color: #787878;
        background-color: #F0F0F0;
        text-align: center;
      }

      .dayun-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 6rpx;
        margin: 8rpx;
        .dayun-ele {
          display: flex;
          flex-direction: row;
          line-height: 44rpx;

          .dayun-ganzhi {
            font-size: 40rpx;
            padding-right: 4rpx;
          }

          .dayun-shishen {
            font-size: 20rpx;
            color: #4B240D;
          }
        }
      }
    }
  }
  .dayun-select {
    border-radius: 12rpx;
    border: 2rpx solid #4B240D;
  }
</style>